package com.devo.icecream.ui.diy

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.devo.icecream.R
import com.devo.icecream.data.IngredientDto
import com.devo.icecream.data.IngredientsBean
import com.devo.icecream.ui.theme.Grey
import com.devo.icecream.ui.theme.IcecreamTheme
import com.devo.icecream.ui.theme.Main
import com.devo.icecream.ui.theme.textGreyColor
import com.devo.icecream.utils.noRippleClickable

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun DiyScreen(
    countDown: Int = 0,
    selectIds: List<Int> = listOf(),
    onBack: () -> Unit = {},
    onRemove: (id: Int) -> Unit = {},
    onMenuClear: () -> Unit = {},
    totalPower: Double = 0.0,
    totalPrice: Double = 0.0,
    onConfirm: () -> Unit = {},
    menu: Map<IngredientDto.CategoryBean, List<IngredientsBean?>> = mapOf(),
    ingredients: Map<Category, List<IngredientsBean>> = mapOf(),// 所有食材列表
    onSelectItem: (id: Int) -> Unit = {},// 选中食材事件
    servicePhone: String = "12390808080", // 服务号码
) {

    Scaffold(backgroundColor = Grey, topBar = { TitleBar(countDown, onBack) }) { contentPadding ->

        Column {

            Row(
                modifier = Modifier
                    .weight(1f)
                    .padding(contentPadding)
                    .fillMaxSize()
            ) {

                Box(
                    modifier = Modifier
                        .weight(2f)
                        .padding(start = 32.dp, end = 32.dp)
                ) {
                    IngredientsLayout(
                        list = ingredients,
                        selectIds = selectIds,
                        onSelectItem = onSelectItem,
                    )

                }

                Box(modifier = Modifier.weight(1f)) {
                    MenuLayout(
                        menus = menu,
                        onClear = onMenuClear,
                        onRemove = onRemove,
                        totalPower = totalPower,
                        totalPrice = totalPrice,
                        onConfirm = onConfirm,
                    )

                }

            }

            Text(
                color = textGreyColor,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 36.dp),
                text = "美味热线：$servicePhone",
                textAlign = TextAlign.Center,
                fontSize = 28.sp
            )

        }
    }
}

/**
 * 界面title
 * @param countDown Int
 * @param onBack Function0<Unit>
 */
@Composable
private fun TitleBar(
    countDown: Int = 90,
    onBack: () -> Unit = {}
) {
    Box(
        modifier = Modifier
            .padding(horizontal = 32.dp)
            .fillMaxWidth(),
    ) {
        Row(
            modifier = Modifier
                .align(Alignment.CenterStart)
                .noRippleClickable { onBack() },
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Icon(
                painter = painterResource(id = R.mipmap.back),
                modifier = Modifier.size(28.dp),
                contentDescription = "",
                tint = textGreyColor
            )
            Spacer(modifier = Modifier.width(8.dp))
            Text(
                text = "返回首页",
                fontSize = MaterialTheme.typography.h1.fontSize,
                color = textGreyColor
            )
        }


        Image(
            modifier = Modifier
                .align(Alignment.Center)
                .padding(vertical = 30.dp)
                .fillMaxWidth(fraction = 0.25f)
                .wrapContentHeight(),
            painter = painterResource(id = R.mipmap.logo),
            contentScale = ContentScale.FillWidth,
            contentDescription = "logo"
        )

        Text(
            modifier = Modifier.align(Alignment.CenterEnd),
            text = "${countDown}s",
            fontSize = MaterialTheme.typography.h1.fontSize,
            fontWeight = FontWeight.Bold,
            color = Main
        )
    }
}

@Preview(heightDp = 2000, widthDp = 1440)
@Composable
fun DiyPreview() {
    IcecreamTheme {
        DiyScreen()
    }
}
